<template>
  <div class="table-classic-wrapper">
    <el-card>

      <!--购买记录表格-->
      <el-table
          :data="orderList"
          @selection-change="handleSelectionChange"
          stripe
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{textAlign: 'center'}"
          style="width: 100%">

        <el-table-column type="selection" width="50"/>

        <el-table-column
            prop="userName"
            label="购买用户">
        </el-table-column>

        <el-table-column
            prop="text"
            label="美食名称">
        </el-table-column>

        <el-table-column
            prop="price"
            label="美食价格"
            align="center">
        </el-table-column>

        <el-table-column
            prop="purchaseCount"
            label="购买数量"
            align="center">
        </el-table-column>

        <el-table-column
            label="购买时间"
            prop="gmtCreate"
            :formatter="formatDate"
            align="center">
        </el-table-column>

        <el-table-column
            prop="orderState"
            label="配送状态"
            align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderState===0">未接单</el-tag>
            <el-tag type="success" v-if="scope.row.orderState===1">已接单</el-tag>
            <el-tag type="danger" v-if="scope.row.orderState===2">待取餐</el-tag>
            <el-tag type="warning" v-if="scope.row.orderState===3">正在路上</el-tag>
            <el-tag type="primary" v-if="scope.row.orderState===4">抵达用户</el-tag>
            <el-tag v-if="scope.row.orderState===5">已接收</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getUserInformation} from "@/api/user";
import {getAllPurchaseByMerchantId} from "@/api/merchant/order/order";
import {getGeneralUserById} from "@/api/general/userGeneral";

export default {

  name: "orderManagement",

  components: {
    Pagination
  },

  data() {
    return {
      /**
       * 多选数据暂存数组
       */
      multipleSelection: [],

      total: 0,//订单总数
      currentPage: 0,//当前页码
      pageSize: 7,//每页显示条数

      originalTotal: 0,//原始订单总数

      /**
       * 订单列表
       */
      orderList: [],

      /**
       * 商家用户信息
       */
      user: undefined,
    }
  },

  created() {
    this.getGeneralUserById();
  },

  methods: {
    /**
     * 获取订单列表
     */
    getOrderList() {

      const formData = new FormData();

      formData.append("merchantId", this.user.id);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      getAllPurchaseByMerchantId(formData).then(res => {
        this.orderList = res.information;
        this.total = res.total;
        this.originalTotal = this.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

    },

    /**
     * 获得用户信息
     */
    getGeneralUserById() {
      const user = eval('(' + getUserInformation() + ')');

      const formData = new FormData();

      formData.append("id", user.id);


      getGeneralUserById(formData).then(res => {
        this.user = res.user;
        this.getOrderList();
      }).catch(() => {
        this.$message.error("用户信息获取失败");
      })
    },

    /**
     * 多选操作，与multipleSelection相对应
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      if (this.originalTotal === this.total) {
        this.getOrderList();
      }
    },

    /**
     * 修改购买或收货时间格式
     */
    formatDate(row) {
      var date = new Date(row.gmtCreate);

      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (month < 10) {
        month = '0' + month;
      }

      if (day < 10) {
        day = '0' + day;
      }

      if (hour < 10) {
        hour = '0' + hour;
      }

      if (minute < 10) {
        minute = '0' + minute;
      }

      if (second < 10) {
        second = '0' + second;
      }

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    },

  }
}
</script>

<style scoped>
@import "../../../assets/less/merchant/commodity/card.less";
</style>
